<template>
  <div>
    <div class="body-content">
      <div class="order-info-div">
        <div class="order-info-title order-info-field paragraph-p2-heavy">
          <div class="paragraph-p2-heavy color-grey choose-div-left">商品&nbsp;<span class="color-red">*</span></div>
          <div class="paragraph-p2-light color-grey choose-div-right div-align-justify-center"
               v-if="order.product.id"
               @click="toChoose">
            <template v-if="order.product.id && !$route.params.id">
              <span>重选</span>
              <img class="icon-16" src="@/static/icon/arrow-right.png" alt=""/>
            </template>
          </div>
        </div>
        <div class="order-info-field" @click="toChoose" v-if="!order.product.id">
          <div class="order-info-field-left paragraph-p2-light color-grey">请选择出单商品</div>
          <div class="order-info-field-right body-heavy color-grey">
            <img class="icon-16" src="@/static/icon/arrow-right.png" alt=""/>
          </div>
        </div>
        <div class="order-item-product-item" v-if="order.product.id">
          <div class="order-item-product">
            <img class="img-64" :src="order.product.picture" alt=""/>
            <div class="order-item-product-content">
              <div class="order-item-product-content-desc paragraph-p2-light text-desc">
                {{ order.product.desc }}
              </div>
              <div class="order-item-product-content-category paragraph-p3-light">
                {{ order.product.category + '；' + order.product.size + '；' + order.product.fitting }}
              </div>
            </div>
          </div>
          <div class="order-item-product-price paragraph-p2-light color-black">
            ${{ $baseJS.numberFormatter(order.product.totalPrice) }}
          </div>
        </div>
      </div>
      <div class="order-info-div">
        <div class="order-info-title paragraph-p2-heavy">
          支付方式&nbsp;<span class="color-red">*</span>
        </div>
        <div v-if="order.id && order.paymentMethod" class="paragraph-p2-light">{{ order.paymentMethod }}</div>
        <field-radio v-else ref="orderPaymentMethodRef" :radio-item-list="orderPaymentRadioItemList" v-on:radioSelectEvent="paymentMethodSelect"></field-radio>
        <field-textarea class="margin-top-div-12" ref="orderPaymentTextareaRef" :value="order.paymentNote"
                        :limit-count="100"></field-textarea>
        <field-uploader class="margin-top-div-20" ref="paymentPicUploaderRef"
                        :picture-list="order.paymentPictureList"
                        :picture-id-list="order.paymentPictureIdList"></field-uploader>
      </div>
      <div class="order-info-div">
        <div class="order-info-title paragraph-p2-heavy">
          提货方式&nbsp;<span class="color-red">*</span>
        </div>
        <div v-if="Number($route.params.type) === GLOBAL.listItemType.order.settlement" class="paragraph-p2-light">{{ order.paymentMethod }}</div>
        <field-radio v-else ref="orderDeliveryMethodRef" :radio-item-list="orderShoppingRadioItemList" v-on:radioSelectEvent="orderDeliveryMethodSelect"></field-radio>
      </div>
      <div class="order-info-div">
        <div class="order-info-title paragraph-p2-heavy">
          备注
        </div>
        <field-textarea class="margin-top-div-12" ref="orderRemarkTextareaRef" :value="order.note"
                        :limit-count="100"></field-textarea>
      </div>
      <div class="order-info-div last-div">
        <div class="order-info-title paragraph-p2-heavy">
          附件
        </div>
        <div class="tiny-light color-grey">最多支持9张照片+1个视频</div>
        <field-uploader class="margin-top-div-20" ref="attachPicUploaderRef" :type="2"
                        :picture-list="order.attachmentList"
                        :picture-id-list="order.attachmentPictureIdList"
        ></field-uploader>
      </div>
    </div>
    <button-center v-if="!order.id" :button-name="'确认出单($'+order.product.totalPrice+')'" @click.native="addOrder"></button-center>
  </div>
</template>
<script>
import FieldUploader from '@/components/Field/Uploader'
import FieldTextarea from '@/components/Field/Textarea'
import FieldRadio from '@/components/Field/Radio'
import ButtonCenter from '@/components/Button/Center'
import {createOrders, editOrder, viewOrderDetail, viewProductDetail} from "@/request/api";
import {Toast} from "vant";

export default {
  name: "OrderEdit",
  components: {
    FieldUploader,
    FieldTextarea,
    FieldRadio,
    ButtonCenter,
  },
  data() {
    return {
      order: {
        id: this.$route.params.id,
        orderNo: '',
        orderStatus: '',
        saleUser: '',
        orderTime: '',
        completedTime: '',
        paymentNote: '',
        deliveryMethod: '1',
        note: '',
        paymentPictureList: [],
        paymentPictureIdList: [],
        attachmentList: [],
        attachmentPictureIdList: [],
        product: {
          id: Number,
          picture: '',
          desc: '',
          category: '',
          fitting: '',
          size: '',
          totalPrice: 0,
        },
      },
      orderPaymentRadioItemList: [
        {title: '全款', value: '1'},
        {title: '有余款', value: '2'},
      ],
      orderShoppingRadioItemList: [
        {title: '自提', value: '1'},
        {title: '邮寄', value: '2'},
      ],
    };
  },
  mounted() {
    this.order.product.id = this.$route.query.productId
    if (this.$route.params && this.$route.params.id) {
      this.getOrderDetail()
    }
    if (this.order.product.id) {
      this.getProductDetail()
    }
  },
  methods: {
    toChoose() {
      this.$router.push({
        path: this.GLOBAL.pathSetting.product.choose,
        query: {
          id: this.$route.query.productId,
          srcUrl: this.$route.query.srcUrl,
        }
      })
    },
    paymentMethodSelect(value) { this.order.paymentMethod = String(value) },
    orderDeliveryMethodSelect(value) { this.order.deliveryMethod =  String(value) },
    getProductDetail() {
      this.$loading.show()
      viewProductDetail({pathParam: this.order.product.id}).then(res => {
        const {State, Msg, Data} = res
        if (State) {
          const { id, product_description, product_category, size, accessories, product_sale_price, product_image_list } = Data
          this.order.product.id = id
          this.order.product.picture = product_image_list ? product_image_list[0].url : ''
          this.order.product.desc = product_description
          this.order.product.category = product_category
          this.order.product.fitting = accessories ? accessories.join(',') : ''
          this.order.product.size = size
          this.order.product.totalPrice = product_sale_price
        } else { Toast(Msg) }
        this.$loading.close()
      }).catch(() => { this.$loading.close() })
    },
    getOrderDetail() {
      this.$loading.show()
      viewOrderDetail({pathParam: this.$route.params.id}).then(res => {
        const {State, Data, Msg} = res
        if (State) {
          const {
            id,
            product_id,
            order_status,
            payment_method,
            payment_note,
            delivery_method,
            note,
            created_at,
            payment_image_list,
            attachment,
            product
          } = Data
          const {
            product_image_list,
            product_description,
            product_category,
            size,
            accessories,
            product_sale_price,
            user
          } = product
          this.order.id = id
          this.order.orderStatus = order_status
          this.order.saleUser = user
          this.order.orderTime = created_at
          this.order.deliveryMethod = delivery_method
          this.order.paymentMethod = payment_method
          this.order.paymentNote = payment_note
          this.order.note = note
          if (payment_image_list) {
            if (payment_image_list instanceof Array) {
              payment_image_list.forEach(paymentImg => {
                const {id, url} = paymentImg
                let type = 'image'
                if (url) {
                  if (url.indexOf('.mp4') > 0 || url.indexOf('.mov') > 0) {
                    type = 'video'
                  }
                }
                const paymentPicItem = {type: type, url: url}
                this.order.paymentPictureList.push(paymentPicItem)
                this.order.paymentPictureIdList.push(id)
              })
            }
          }

          if (attachment) {
            if (attachment instanceof Array) {
              attachment.forEach(attachmentImg => {
                const {id, url} = attachmentImg
                let type = 'image'
                if (url) {
                  if (url.indexOf('.mp4') > 0 || url.indexOf('.mov') > 0) {
                    type = 'video'
                  }
                }
                const attachmentItem = {type: type, url: url}
                this.order.attachmentList.push(attachmentItem)
                this.order.attachmentPictureIdList.push(id)
              })
            }
          }
          this.order.product.id = product_id
          this.order.product.picture = product_image_list ? product_image_list[0] : ''
          this.order.product.desc = product_description
          this.order.product.category = product_category
          this.order.product.size = size
          this.order.product.fitting = accessories
          this.order.product.totalPrice = product_sale_price
          this.$refs.orderDeliveryMethodRef.setValue(delivery_method === '自提' ? '1' : '2')
          this.$refs.orderPaymentTextareaRef.setValue(payment_note)
          this.$refs.orderRemarkTextareaRef.setValue(note)
        } else { Toast(Msg) }
        this.$loading.close()
      }).catch(() => { this.$loading.close() })
    },
    addOrder() {
      if (this.order.product.id) {
        const paymentPicIdList = this.$refs.paymentPicUploaderRef.getProdPicIdList()
        const attachPicIdList = this.$refs.attachPicUploaderRef.getProdPicIdList()
        let param = {
          product_id: this.order.product.id,
          payment_method: this.order.paymentMethod === '1' ? '全款' : '有余款',
          payment_note: this.$refs.orderPaymentTextareaRef.desc,
          payment_image_list: paymentPicIdList ? paymentPicIdList.join(',') : '',
          delivery_method: this.order.deliveryMethod === '1' ? '自提' : '邮寄',
          note: this.$refs.orderRemarkTextareaRef.desc,
          attachment: attachPicIdList ? attachPicIdList.join(',') : '',
        }
        this.$loading.show()
        createOrders(param).then(res => {
          const {State, Data} = res
          if (State) {
            const { id } = Data
            this.$router.push({path: this.GLOBAL.pathSetting.order.success + id})
          } else {
            Toast('新增失败')
          }
          this.$loading.close()
        }).catch(() => { this.$loading.close() })
      } else {
        Toast('请选择商品')
      }

    },
    editOrder() {
      const paymentPicIdList = this.$refs.paymentPicUploaderRef.getProdPicIdList()
      const attachPicIdList = this.$refs.attachPicUploaderRef.getProdPicIdList()
      let param = {
        pathParam: this.order.id,
        product_id: this.order.product.id,
        payment_method: this.order.paymentMethod === '1' ? '全款' : '有余款',
        payment_note: this.$refs.orderPaymentTextareaRef.desc,
        payment_image_list: paymentPicIdList ? paymentPicIdList.join(',') : '',
        delivery_method: this.order.deliveryMethod === '1' ? '自提' : '邮寄',
        note: this.$refs.orderRemarkTextareaRef.desc,
        attachment: attachPicIdList ? attachPicIdList.join(',') : '',
      }
      this.$loading.show()
      editOrder(param).then(res => {
        const {State} = res
        if (State) {
          this.$router.push({
            path: this.GLOBAL.pathSetting.order.main,
            query: {tab: this.listItemCode,},
          })
        } else {
          Toast('编辑失败')
        }
        this.$loading.close()
      }).catch(() => { this.$loading.close() })
    },
  },
};
</script>

<style scoped>
.order-info-div {
  padding: 12px;
  margin: 8px 0;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.order-info-field {
  height: 38px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.order-info-field-left {
  text-align: left;
  width: 307px;
}

.order-info-field-right {
  text-align: right;
  width: 16px;
}

.choose-div-left {
  width: 275px;
}

.choose-div-right {
  width: 50px;
}

.order-info-title {
  height: 22px;
  color: #242424;
}

.order-info-field-right > img {
  padding-top: 2px;
}

.order-item-product {
  margin: 12px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order-item-product-content {
  margin-left: 8px;
  width: 255px;
}

.order-item-product-content-desc {
}

.order-item-product-content-category {
  color: #737373;
}

.order-item-product-price {
  text-align: right;
}
.last-div {
  margin-bottom: 80px;
}
</style>
<style>
.uploader-icon {
  margin-left: 0 !important;
}
</style>

